<template>
  <div style="margin-top:0;padding-top:0px;">
    <div class="head-fix">

      <Head></Head>
      <hr style="margin-top:8px;margin-bottom:8px;">
      <Tag></Tag>
    </div>

    <div class="scrollerWrap">
      <scroller :on-refresh="refresh" :on-infinite="infinite" refreshText="松开刷新" noDataText="--我也是有底线的!!--" refresh-layer-color="#4b8bf4" loading-layer-color="#ec4949">
        <svg class="spinner" style="stroke: #4b8bf4;" slot="refresh-spinner" viewBox="0 0 64 64">
          <g stroke-width="7" stroke-linecap="round">
            <line x1="10" x2="10" y1="27.3836" y2="36.4931">
              <animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite"></animate>
              <animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite"></animate>
              <animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite"></animate>
            </line>
            <line x1="24" x2="24" y1="18.6164" y2="45.3836">
              <animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite"></animate>
              <animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite"></animate>
              <animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite"></animate>
            </line>
            <line x1="38" x2="38" y1="16.1233" y2="47.8767">
              <animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite"></animate>
              <animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite"></animate>
              <animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite"></animate>
            </line>
            <line x1="52" x2="52" y1="16" y2="48">
              <animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite"></animate>
              <animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite"></animate>
              <animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite"></animate>
            </line>
          </g>
        </svg>
        <main>
          <div class="article-div">
            <Item class="article-item" v-for="item in articles" v-bind:key="item.name" :article="item"></Item>
          </div>
        </main>
        <svg class="spinner" style="fill: #ec4949;" slot="infinite-spinner" viewBox="0 0 64 64">
          <g>
            <circle cx="16" cy="32" stroke-width="0" r="3">
              <animate attributeName="fill-opacity" dur="750ms" values=".5;.6;.8;1;.8;.6;.5;.5" repeatCount="indefinite"></animate>
              <animate attributeName="r" dur="750ms" values="3;3;4;5;6;5;4;3" repeatCount="indefinite"></animate>
            </circle>
            <circle cx="32" cy="32" stroke-width="0" r="3.09351">
              <animate attributeName="fill-opacity" dur="750ms" values=".5;.5;.6;.8;1;.8;.6;.5" repeatCount="indefinite"></animate>
              <animate attributeName="r" dur="750ms" values="4;3;3;4;5;6;5;4" repeatCount="indefinite"></animate>
            </circle>
            <circle cx="48" cy="32" stroke-width="0" r="4.09351">
              <animate attributeName="fill-opacity" dur="750ms" values=".6;.5;.5;.6;.8;1;.8;.6" repeatCount="indefinite"></animate>
              <animate attributeName="r" dur="750ms" values="5;4;3;3;4;5;6;5" repeatCount="indefinite"></animate>
            </circle>
          </g>
        </svg>

      </scroller>
    </div>

    <!-- <div class="bottom-fix">
      <Nav></Nav>
    </div> -->
  </div>

</template>

<script src="vue.js"></script>
<script>
import Head from "./components/IndexHead.vue";
import Tag from "./components/IndexTags.vue";
import Item from "./components/IndexArticleItem.vue";
import Nav from "./components/IndexNav.vue";

export default {
  name: "ViHuIndex",
  components: {
    Head,
    Tag,
    Item,
    Nav
  },
  data: function() {
    let articles = [];
    for (let i = 0; i < 10; i++) {
      let r = this.getRandomNum(0, 2);
      switch (r) {
        case 0:
          articles.push({
            logo:
              "https://pic4.zhimg.com/v2-e81368638aeb2f65d16e6c3652fd94af_s.jpg",
            author: "野蛮生长",
            what: "发表了文章",
            when: "10小时前",
            title: "钱术（六）闲暇时间的赚钱项目",
            content:
              "随着年纪增长，我越来越深切地感受到熵增趋势的无情进程，一切美好的事物都在无可挽回地逝去。人的肉体变得丑陋，人的精神变得萎靡，所有曾经美好的关系都趋向于解体和消融。因为人按照本性是懒惰的，好逸恶劳的，除非有非做不可的理由，人自然地趋向于无所事事，游手好闲。过了四十岁，人就连做爱都懒得再做。如果不吃饭不会饿死，人就连吃饭都能免了。林语堂有一次说：中国人跟美国人最大的区别就是，美国人喜欢工作和竞争，中国人喜欢悠闲的生活。虽然林语堂不是社会学家，但是由于他在两个国家都生活过不短的时间，他对两国人的区别的这个感观倒可能是真切的。",
            hasOutPic: true,
            outPic:
              "https://pic2.zhimg.com/50/v2-0212816b95214f6a65ad4f4eda57c3d5_400x224.jpg",
            leftNum: 78,
            leftText: "赞同",
            rightNum: 201,
            rightText: "评论"
          });
          break;
        case 1:
          articles.push({
            logo: "https://pic1.zhimg.com/50/7c3f1f24c_xs.jpg",
            author: "姗姗是个小太阳",
            what: "关注了问题",
            when: "12小时前",
            title: "身材丰满型的女生穿旗袍不好看吗",
            hasOutPic: false,
            leftNum: 8,
            leftText: "回答",
            rightText: "关注",
            rightNum: 1024
          });
          break;
        case 2:
          articles.push({
            logo:
              "https://pic1.zhimg.com/v2-21bfc34f65fa9f4314b70ca0da0f6374_is.jpg",
            author: "budding ",
            what: "收藏了回答",
            when: "10小时前",
            title: "大学时经济独立是一种怎样的体验",
            content:
              '希望本文对大家建立正确的，科学的【健康观】，【减肥观】起到积极引导的作用,以后不在被各种健身，运动，减肥方面的谣言和胡说八道的垃圾文章困扰；对减肥的以下错误，不健康的认识 通通忘掉:1."不吃晚饭" 2.“过度节食” 3."不吃主食" 4."短时间内疯狂的运动"',
            hasOutPic: true,
            outPic:
              "https://pic2.zhimg.com/50/v2-49efdafaba313f5341b1f78738d59c77_400x224.jpg",
            leftNum: 102,
            leftText: "赞同",
            rightNum: 201,
            rightText: "评论"
          });
          break;
      }
    }

    let addArticles = [
      {
        logo:
          "https://pic2.zhimg.com/50/v2-044253a39e7a96c0b03a3acd50c17367_s.jpg",
        author: "六层楼",
        what: "关注了问题",
        when: "1天前",
        title: '为什么"网赚"问答里没有一个正经问题',
        content:
          "知乎最近很多关于网赚的问答，里面很多答案真的是脑洞大开，但是一直看下来，发现都是带点违法性质，或者说不道德，或者说是薅羊毛的项目。为什么没有一个正规靠创造价值获得收入的项目，哪怕是卖体力活项目？是不是可以说，网赚就是违法？",
        hasOutPic: true,
        outPic:
          "https://pic1.zhimg.com/50/v2-99e339b5af70e7696d6a22dfaf2c153d_400x224.jpg",
        leftNum: 211,
        leftText: "回答",
        rightText: "关注",
        rightNum: 1011
      },
      {
        logo: "https://pic4.zhimg.com/0e38fd64939be2b3d33c9dc8f0134f43_im.jpg",
        author: "六层楼",
        what: "关注了问题",
        when: "1小时前",
        title: "为什么大家都心疼faker，却没人心疼uzi？",
        content:
          "因为态度差别faker在比赛上怎样，大家有目共睹，各种拿命c，舍命保队友，放弃carry型英雄，听教练用露露这种四保一的英雄，结果呢？？？推推bang实力打哭飞科。你让观众怎么不心疼？！！努力想赢却发现队友在演自己，无力回天，无奈还要和笑嘻嘻的队友跟三星握手，我他么都想上去打死bang了。uzi呢？今天世界赛前各种夺冠，却在八强倒了，对手还是个欧洲三号种子，各种睿智bp，就好比一个高三生高考前各种模拟各种成绩都表明是清华北大的料，高考前一天网吧通宵，第二天考场睡觉一样，你让粉丝心里怎么想。第四场（还是第二场？）bp时小狗怎么说，奥巴马，奥巴马，希维尔不好。。。",
        hasOutPic: true,
        outPic:
          "https://pic4.zhimg.com/50/v2-f766906e7829bb8eb8c79f57672298e3_400x224.jpg",
        leftNum: 211,
        leftText: "回答",
        rightText: "关注",
        rightNum: 1011
      }
    ];

    return {
      articles: articles,
      addArticles: addArticles,
      topAddNum: 0,
      bottomAddNum: 0
    };
  },

  methods: {
    // 下拉刷新
    refresh(done) {
      setTimeout(() => {
        // 随机添加1-2个数据
        let addNum = this.getRandomNum(1, 2);
        for (let i = 0; i < addNum; i++) {
          let add;
          if (i % 2 === 0) {
            add = this.addArticles[0];
          } else {
            add = this.addArticles[1];
          }
          this.articles.splice(0, 0, add);
        }
        this.topAddNum = this.topAddNum + addNum;
        done();
      }, 1500);
    },
    infinite(done) {
      if (this.bottomAddNum >= 5) {
        setTimeout(() => {
          done(true);
        }, 1500);
        return;
      }
      setTimeout(() => {
        let addNum = this.getRandomNum(1, 4);
        for (let i = 0; i < addNum; i++) {
          let add;
          if (i % 2 === 0) {
            add = this.addArticles[0];
          } else {
            add = this.addArticles[1];
          }
          this.articles.push(add);
        }
        this.bottomAddNum = this.bottomAddNum + addNum;
        setTimeout(() => {
          done();
        });
      }, 1500);
    },
    // 获取随机数
    getRandomNum: function(n, m) {
      return parseInt(Math.random() * (m - n + 1) + n, 10);
    }
  }
};
</script>
<style scoped>
.head-fix {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100px;
  background-color: white;
}
.bottom-fix {
  widows: 100%;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
.article-div {
  background-color: #eaebea;
  margin-top: 90px;
}
.article-item {
  background-color: #ffffff;
  margin-top: 10px;
}
</style>


